<template>
    <div>
        <a-row :gutter="16">
            <a-col v-for="(item,index) in images" :key="index" :span="4">
                <a-icon class="close-btn" type="close-circle" @click="deleteItem(item)" v-if="canDelete"></a-icon>
                <img class="image-preview" :src="item">
            </a-col>
        </a-row>
    </div>
</template>
<script>
export default {
    name: 'image-viewer',
    props: {
        images: Array,
        canDelete: Boolean
    },
    methods: {
        deleteItem(item) {
            this.$emit('deleteItem', item);
        }
    },
    watch: {
        images(newValue) {
            console.log(newValue);
        }
    }
};
</script>
<style lang="stylus" scoped>
.close-btn {
    position: absolute;
    right: 0;
    top: -7;
}

.image-preview {
    width: 100%;
    height: auto;
}
</style>
